<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>box</div>
    <div>box</div>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        /*
            1- 引入jq
                https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js--没有压缩过js
                https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js--压缩过js

                https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js

                压缩过的js  会把 注释--空格--换行-删除掉
                            函数的形参变短---》加密效果
            2- 使用- 看文档
                引入以后提供了一个 全局函数
        */
        console.log(typeof jQuery);
        // --这个函数每次调用都会返回一个新对象-- 也叫jq中对象-- 这个对象上的方法，，类似js querySelectorAll返回的对象--伪数组
        console.log(jQuery);
        console.log($);;
        console.log($ === jQuery);;//true 


        // jQuery 函数类似querySelectorAll 
        // 类似js querySelectorAll返回的对象--伪数组

        // 选中页面所有所有div标签
        /* 
            jqueyr 方法 
                参数是一个css选择器
                返回值--是一个伪数组--本质对象 --存放了所有css选择器匹配到 dom元素
        */
        let $div = $('div');
        console.log($div);

        // 通过下标获取原生js dom对象
        // console.log($div[0]);
        // console.log($div[1]);
        // $div[0].style.color = 'red'


        // 设置css样式--对所有选中元素都有效
        $div.css('color', 'red')
    </script>

</body>

</html>